{include file="public/header" /}
<div class="layui-card form">
    <div class="layui-card-body">
        <form id="sectionFormData" class="layui-form layui-form-pane" autocomplete="off">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本内容</li>
                    <li>SEO内容</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" id="sectionName" placeholder="请输入名称" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">上级栏目</label>
                            <div class="layui-input-block">
                                <select name="pid" id="nodeId" lay-filter="nodeId" lay-search>
                                    <option value="">请选择</option>
                                    <option value="0">无上级</option>
                                    {volist name="node_list" id="vo"}
                                    <option value="{$vo.id}">{$vo.name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required" id="nodeLabel">URL</label>
                            <div class="layui-input-block">
                                <input type="text" name="url" id="sectionUrl" placeholder="请输入url" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-upload">
                                <label class="layui-form-label">栏目banner</label>
                                <div class="layui-upload">
                                    <div class="layui-input-block">
                                        <div class="upload-frame" id="uploadBanner">
                                            <i class="layui-icon layui-icon-addition"></i>
                                        </div>
                                        <div class="preview-box">
                                            <div class="uploader-list" id="bannerPreview"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <input type="hidden" name="banner" id="sectionBanner">
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-upload">
                                <label class="layui-form-label">手机端banner</label>
                                <div class="layui-upload">
                                    <div class="layui-input-block">
                                        <div class="upload-frame" id="uploadSectionMobileBannerBtn">
                                            <i class="layui-icon layui-icon-addition"></i>
                                        </div>
                                        <div class="preview-box">
                                            <div class="uploader-list" id="wapImgPreview"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <input type="hidden" name="mobile_banner" id="wapImgUrl">
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="status" checked lay-text="启用|停用" lay-skin="switch">
                                <input type="checkbox" name="is_recommended" lay-text="推荐|推荐" lay-skin="switch">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input type="text" name="sort" value="255" class="layui-input" placeholder="请输入排序，数字越小，排序越靠前">
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_title" id="sectionSeoTitle" class="layui-input" placeholder="请输入SEO标题，长度尽量控制在60个字符内">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO关键词</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_keywords" id="sectionSeoKeywords" class="layui-input" placeholder="请输入SEO标题，每个关键词用英文逗号隔开">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO描述</label>
                            <div class="layui-input-block">
                                <textarea name="seo_describe" id="sectionSeoDescribe" placeholder="请输入SEO描述" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="btn-block">
                        <button type="button" onclick="sendSectionFormData()" class="layui-btn layui-btn-normal"><i class="fa fa-check"></i>提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i>重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

<script>
    var root = 0;//是否无上级 1：是 0否
    layui.use(['form','upload'],function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload

        //电脑端banner
        uploadTemplate('#uploadBanner','#bannerPreview','#sectionBanner','main','mainBannerLoad')

        //手机端banner
        uploadTemplate('#uploadSectionMobileBannerBtn','#wapImgPreview','#wapImgUrl','mobile','mobileBannerLoad')

        function uploadTemplate(btn,preview,value,flag,load){
            upload.render({
                elem: btn,
                url: "{:url('section/upload')}",
                multiple: false,
                accept: 'file',
                size: uploadFileSize,
                acceptMime: uploadImgExt,
                before: function (obj) {
                    $(btn).addClass('upload-btn-hide')
                    $(preview).empty()
                    load = layer.load(1, {shade: [0.5, '#FFF'], time: 0})//弹出遮罩层
                },
                done: function (res) {
                    layer.close(load)//关闭遮罩层
                    sucMsg(res.msg)
                    if (res.code == 'suc') {
                        $(preview).append(
                            '<div class="file-items">' +
                            '<div class="handle" data-flag="'+flag+'" data-path="' + res.url + '"><i class="layui-icon layui-icon-delete"></i></div>' +
                            '<img class="cover-preview" src="' + res.url + '">' +
                            '</div>'
                        );

                        $(value).val(res.url)
                    } else {
                        $(btn).removeClass('upload-btn-hide')
                    }
                }
            })
        }
    })

    //删除图片
    $(document).on("click", ".file-items .handle", function (event) {
        //标记
        let flag = $(this).attr('data-flag')
        if (flag == 'main') {
            $('#uploadBanner').removeClass('upload-btn-hide')//显示上传按钮
            $("#sectionBanner").val('')
        } else if (flag == 'mobile') {
            $('#uploadSectionMobileBannerBtn').removeClass('upload-btn-hide')//显示上传按钮
            $("#wapImgUrl").val('')
        }
        $(this).parent().remove();
    })

    function sendSectionFormData() {
        let name = $("#sectionName").val();
        let parentId = $("#nodeId").val();
        let url = $("#sectionUrl").val();
        if (emptyCheck(name)) {
            hintMsg('名称不能为空', 'name')
            return false;
        } else if (emptyCheck(parentId)) {
            hintMsg('请选择上级', 'nodeId')
            return false;
        } else if (root == 0 && emptyCheck(url)) {
            hintMsg('请输入url', 'url')
            return false;
        }
        let data = $("#sectionFormData").serialize()
        //弹出遮罩层，防止多次点击
        var sectionAddLoad = layer.load(1, {shade: [0.5, '#FFF'], time: 0})
        ajaxRequest("{:url('section/add')}", data, function (res) {
            if (res.code == 'suc') {
                sucMsg(res.msg, function () {
                    //刷新父级页面
                    xadmin.father_reload()
                    //关闭遮罩层
                    layer.close(sectionAddLoad)
                    //关闭当前弹出层
                    xadmin.close()
                })
            } else {
                errMsg(res.msg, function () {
                    //关闭遮罩层
                    layer.close(sectionAddLoad)
                })
            }
        })
    }
</script>
</html>